<template>
	<uv-popup class="m-navbar_drawer" ref="refUserDrawer" mode="right" @maskClick="close">
		<view class="user" :style="{'--user-drawer-width': drawerWidth+'px'}">
			<view class="user_title">用户中心</view>
			<view class="user_info">
				<view class="user_pic">
					<uv-image :src="userPic" width="48" height="48" shape="circle"></uv-image>
				</view>
				<view class="user_name">{{userInfo?.nickName}}</view>
				<view class="job_name">{{userInfo?.remark}}</view>
			</view>
			<uv-list class="user_sys">
				<uv-list-item title="账户信息" thumb="../../static/images/user/icon_zhxx.png" @click="goInfo"
				 clickable border show-arrow>
				</uv-list-item>
				<uv-list-item title="我的关注" thumb="../../static/images/user/icon_wdgz.png" 
				clickable border show-arrow>
				</uv-list-item>
				<uv-list-item title="用户反馈" thumb="../../static/images/user/icon_yhfk.png" 
				clickable border show-arrow>
				</uv-list-item>
				<uv-list-item title="设置与隐私"  thumb="../../static/images/user/icon_yszc.png"   @click="goSysInfo"
				clickable border show-arrow>
				</uv-list-item>
			</uv-list>
			<uv-button class="logout_btn" shape="circle" type="primary" @click="logot">退出</uv-button>
		</view>
	</uv-popup>
	<info ref="refInfoData"></info>
	<sys-info ref="refSysInfo"></sys-info>
</template>

<script setup name="user">
	import { computed, ref, inject, reactive } from 'vue';
	import { storeToRefs } from 'pinia'
	
	import { userStore } from '@/stores'
	import { clearLoginInfo } from '@/utils'
	
	import info from './components/info.vue'
	import sysInfo from './components/sysInfo.vue'
	import defaultPic from'@/static/images/user/nav_logo.png'
	
	const refUserDrawer = ref(null);
	const refInfoData = ref(null);
	const refSysInfo = ref(null)
	const drawerWidth = computed(() => {
		return uni.upx2px(584)
	})
		
	const userPic = computed(() => {
		const global = inject('global');
		const { userInfo } = userStore()
		return userInfo?.avatar?(global.baseFileUrl + userInfo.avatar) : defaultPic
	})
	
	const userInfo = computed(() => {
		const { userInfo } = userStore()
		return userInfo
	})
	
	const open = () => {
		uni.hideTabBar()
		refUserDrawer.value.open();
	}
	const close = () => {
		refUserDrawer.value.close();
		uni.showTabBar();
	}
	const goInfo = () => {
		refInfoData.value.open()
	}
	const goSysInfo = () => {
		refSysInfo.value.open()
	}
	
	const logot = () => {
		clearLoginInfo()
	}
	
	// 向上暴露
	defineExpose({
	  open,
	});
</script>

<style scoped lang="scss">
	.m-navbar_drawer {
		::v-deep .uv-overlay {
			backdrop-filter: blur(4rpx);
		}
	}
	.user {
		width: var(--user-drawer-width);
		padding-top:  var(--status-bar-height);
		height: 100%;
		position: relative;
		.user_title {
			text-align: center;
			height: 44px;
			line-height: 44px;
		}
		
		.user_info {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			
			.user_name {
				margin-top: 12rpx;
				font-family: 600;
				color: $uni-text-color;
				font-size: $uni-font-size-lg;
				line-height: 36rpx;
			}
			.job_name {
				color: $uni-text-color-placeholder;
				font-size: $uni-font-size-sm;
				line-height: 36rpx;
			}
		}
		.user_pic {
			width: 98rpx;
			height: 98rpx;
		}
		.user_sys {
			margin: 0 24rpx;
			margin-top: 24rpx;
		}
		.logout_btn {
			position: absolute;
			left: 50%;
			bottom: 8%;
			width: 80%;
			transform: translate(-50%, 0%);
		}
	}
</style>